<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7EB9',
                        secondary: '#A78BFA',
                        accent: '#FBBF24',
                        success: '#34D399',
                        warning: '#FBBF24',
                        danger: '#F87171',
                        info: '#60A5FA',
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 欢迎区域 -->
        <div class="bg-gradient-to-r from-pink-400 to-purple-500 p-5 text-white">
            <div class="flex justify-between items-center mb-2">
                <h1 class="text-[clamp(1.25rem,3vw,1.5rem)] font-bold">你好，欢迎回来！</h1>
                <div class="flex space-x-2">
                    <button class="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-search"></i>
                    </button>
                    <button class="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-bell-o"></i>
                    </button>
                </div>
            </div>
            <p class="text-white/90">今天是星期三，有 2 件工具需要注意</p>
        </div>
        
        <!-- 快捷统计卡片 -->
        <div class="px-4 -mt-5">
            <div class="grid grid-cols-3 gap-3">
                <div class="stat-card bg-white p-3 text-center">
                    <div class="text-2xl font-bold text-primary mb-1">5</div>
                    <div class="text-xs text-gray-500">工具分类</div>
                </div>
                <div class="stat-card bg-white p-3 text-center">
                    <div class="text-2xl font-bold text-secondary mb-1">26</div>
                    <div class="text-xs text-gray-500">工具总数</div>
                </div>
                <div class="stat-card bg-white p-3 text-center">
                    <div class="text-2xl font-bold text-accent mb-1">40</div>
                    <div class="text-xs text-gray-500">使用次数</div>
                </div>
            </div>
        </div>
        
        <!-- 进度区域 -->
        <div class="mt-5 px-4">
            <div class="bg-white rounded-2xl p-4 shadow-custom">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-base font-bold text-gray-800">本月进度</h2>
                    <span class="text-sm font-medium text-primary">78%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-bar-fill" style="width: 78%"></div>
                </div>
                
                <!-- 任务图标 -->
                <div class="flex justify-center mt-4 space-x-6">
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mb-1">
                            <i class="fa fa-check text-primary text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-600">完成</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-1">
                            <i class="fa fa-book text-secondary text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-600">学习</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mb-1">
                            <i class="fa fa-calendar text-accent text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-600">计划</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 今日学习 -->
        <div class="mt-4 px-4">
            <div class="bg-white rounded-2xl p-4 shadow-custom">
                <h2 class="text-base font-bold text-gray-800 mb-3">今日使用</h2>
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-600">已使用时间</span>
                    <span class="text-sm font-medium">58% / 28分钟</span>
                </div>
                <div class="progress-bar mb-3">
                    <div class="progress-bar-fill" style="width: 58%"></div>
                </div>
                <button class="w-full py-2.5 bg-gray-100 text-gray-800 rounded-xl text-sm font-medium">
                    继续使用
                </button>
            </div>
        </div>
        
        <!-- 最近使用的工具 -->
        <div class="mt-4 px-4">
            <div class="flex justify-between items-center mb-2">
                <h2 class="text-base font-bold text-gray-800">最近使用</h2>
                <button class="text-primary text-sm">查看全部</button>
            </div>
            
            <div class="space-y-3">
                <div class="tool-card p-3 shadow-sm">
                    <div class="flex items-center">
                        <div class="tool-icon bg-primary/10 text-primary mr-3">
                            <i class="fa fa-bolt"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800">电动螺丝刀</h3>
                                <span class="status-badge bg-green-100 text-green-800">在用</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">博世 | 昨天使用</p>
                            <p class="text-xs text-gray-500 mt-0.5">存放在：车库工具箱</p>
                        </div>
                    </div>
                </div>
                
                <div class="tool-card p-3 shadow-sm">
                    <div class="flex items-center">
                        <div class="tool-icon bg-blue-100 text-blue-600 mr-3">
                            <i class="fa fa-line-chart"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800">激光测距仪</h3>
                                <span class="status-badge bg-green-100 text-green-800">在用</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">得伟 | 3天前使用</p>
                            <p class="text-xs text-gray-500 mt-0.5">存放在：书房抽屉</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 需要注意的工具 -->
        <div class="mt-4 px-4 mb-6">
            <div class="flex justify-between items-center mb-2">
                <h2 class="text-base font-bold text-gray-800">需要注意</h2>
            </div>
            
            <div class="space-y-3">
                <div class="tool-card p-3 shadow-sm">
                    <div class="flex items-center">
                        <div class="tool-icon bg-amber-100 text-amber-600 mr-3">
                            <i class="fa fa-exclamation-triangle"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800">电钻</h3>
                                <span class="status-badge bg-amber-100 text-amber-800">需要保养</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">牧田 | 已使用10次，需要润滑</p>
                            <p class="text-xs text-amber-600 mt-0.5"><i class="fa fa-clock-o mr-1"></i> 上次保养：3个月前</p>
                        </div>
                    </div>
                </div>
                
                <div class="tool-card p-3 shadow-sm">
                    <div class="flex items-center">
                        <div class="tool-icon bg-red-100 text-red-600 mr-3">
                            <i class="fa fa-hand-paper-o"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-medium text-gray-800">园艺修剪机</h3>
                                <span class="status-badge bg-red-100 text-red-800">已借出</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">借给：王小明 | 2023-10-15</p>
                            <p class="text-xs text-red-600 mt-0.5"><i class="fa fa-calendar mr-1"></i> 应归还日期：2023-10-25</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 添加淡入动画
            const cards = document.querySelectorAll('.tool-card, .stat-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.classList.add('fade-in');
                }, 100 * index);
            });
        });
    </script>
</body>
</html>